<template>
  <section class="header_top">
    <div class="header_top_l">
      <img class="custom_avator" src="@/assets/chatDetails/envelopes.png" alt="" />
      <div class="custom_desc">
        <div class="custom_desc_title">红包裂变</div>
        <div class="custom_desc_desc"> 活动案例介绍内容详情 </div>
        <br />
        <div>使用该模块需要开通企业支付，<span style="color: #ff6b00; font-size: 14px; cursor: pointer" @click="router.push('/channelconfig/qywechat/enterprisepayment')">去开通</span> </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router'
  const router = useRouter()
</script>

<style lang="scss" scoped>
  .header_top {
    padding: 20px;
    box-sizing: border-box;
    height: 132px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header_top_l {
      display: flex;
    }
    .custom_avator {
      width: 100px;
      height: 100px;
      margin-right: 16px;
    }
    .custom_intro {
      margin-left: 15px;
    }
    .custom_desc {
      .custom_desc_title {
        margin-top: 10px;
        font-size: 20px;
        font-family: STHeitiSC-Medium, STHeitiSC;
        font-weight: 500;
        color: #33302d;
        line-height: 21px;
        margin-bottom: 6px;
      }
      .custom_desc_desc {
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #33302d;
        // line-height: 18px;
      }
    }
  }
</style>
